<link rel="stylesheet" href="basics.css">
<style>
    #lel {
      overflow: auto;
      top: 100px;
      height: 800px;
      width: 500px;
      background-color: lightcoral;
    }

    .selectorrr {
        background: rgba(255, 255, 0, 0.5);
    }

    .item.five {
      top: 1000px;
      left: 1000px;
    }
</style>
<div id="lel">
    <button type="button" id="one" class="item one">1</button>
    <button type="button" id="five" class="item five">5</button>
</div>

<script src="../../dist/DragSelect.js"></script>
<script>
    window.callback = [];
    window.ds = new DragSelect({
        selectables: document.getElementsByClassName('item'),
        customStyles: true,
        selectorClass: 'selectorrr',
        area: document.getElementById('lel'),
    });
    window.ds.subscribe('DS:end', ({items}) => window.callback = items.map(item => item.id))
</script>
